<template>
  <div class="my">
    <view class="my_content">
      <view v-if="Object.keys(userInfo).length == 0" class="my_yiyle">
        <uv-image
          @click="clickLogin"
          src="/static/login.png"
          width="115rpx"
          height="115rpx"
          shape="circle"
        ></uv-image>
        <view @click="clickLogin" class="click">点击登录</view>
      </view>
      <view
        @click="gotoNewPage"
        v-if="Object.keys(userInfo).length > 0"
        class="my_yiyle"
      >
        <uv-image
          :src="userInfo.avatarUrl"
          width="115rpx"
          height="115rpx"
          shape="circle"
        ></uv-image>

        <view>
        <view class="click">{{ userInfo.nickName }}</view>
        <view style="font-size: 22rpx;margin-left: 20rpx;margin-top:5rpx;font-weight: bold;">{{ userInfo.userMobile }}</view>
      </view>
      </view>

      <view v-if="false" class="my_message">
        <view class="item">
          <uv-image
            width="40rpx"
            height="47rpx"
            src="/static/q1.png"
          ></uv-image>
          <view class="tezxt">优惠券</view>
        </view>

        <view class="item">
          <uv-image
            width="47rpx"
            height="47rpx"
            src="/static/q2.png"
          ></uv-image>
          <view class="tezxt">商品收藏</view>
        </view>

        <view class="item">
          <uv-image
            width="47rpx"
            height="47rpx"
            src="/static/q3.png"
          ></uv-image>
          <view class="tezxt">店铺收藏</view>
        </view>

        <view class="item">
          <uv-image
            width="47rpx"
            height="47rpx"
            src="/static/q4.png"
          ></uv-image>
          <view class="tezxt">浏览足迹</view>
        </view>
      </view>

      <view style="margin-top: 50rpx" class="my_list">
        <view class="list_title">
          <view class="list_left">
            <uv-image
              src="/static/c1.png"
              width="31rpx"
              height="28rpx"
            ></uv-image>
            <view class="my_text">我的订单</view>
          </view>

          <view @click="gotoMyList(0)" class="list_right">
            <view class="my_text_right_lef">全部订单</view>
            <uv-icon size="10" name="arrow-right"></uv-icon>
          </view>
        </view>

        <view style="margin-top: 40rpx" class="box_list">
          <view style="position: relative" @click="gotoMyList(1)" class="item">
            <view
              v-if="orderData.unPay"
              style="
                width: 30rpx;
                height: 30rpx;
                border: 1px solid #eb2444;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: -28rpx;
                right: -13rpx;
                font-size: 16rpx;
                z-index: 99;
                color: #eb2444;
                font-weight: bolder;
              "
              >{{ orderData.unPay }}</view
            >
            <uv-image
              mode='widthFix'
              src="/static/aa5.png"
              width="60rpx"
              
            ></uv-image>
            <view class="text">待付款</view>
          </view>

          <view style="position: relative" @click="gotoMyList(2)" class="item">
            <view
              v-if="orderData.payed"
              style="
                width: 30rpx;
                height: 30rpx;
                border: 1px solid #eb2444;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: -28rpx;
                right: -13rpx;
                font-size: 16rpx;
                z-index: 99;
                color: #eb2444;
                font-weight: bolder;
              "
              >{{ orderData.payed }}</view
            >
            <uv-image
              src="/static/aa8.png"
              width="60rpx"
              mode='widthFix'
            ></uv-image>
            <view class="text">待发货</view>
          </view>

          <view style="position: relative" @click="gotoMyList(3)" class="item">
            <view
              v-if="orderData.consignment"
              style="
                width: 30rpx;
                height: 30rpx;
                border: 1px solid #eb2444;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: -28rpx;
                right: -13rpx;
                font-size: 16rpx;
                z-index: 99;
                color: #eb2444;
                font-weight: bolder;
              "
              >{{ orderData.consignment }}</view
            >
            <uv-image
              src="/static/aa7.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">待收货</view>
          </view>

          <view v-if="false" class="item">
            <uv-image
              src="/static/m4.png"
              width="66rpx"
              height="55rpx"
            ></uv-image>
            <view class="text">待评价</view>
          </view>

          <view @click="gotoMyList(5)" style="position: relative" class="item">
            <uv-image
              src="/static/aa6.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">退换/售后</view>
          </view>
        </view>
      </view>

      <view class="my_list ">
        <view class="box_list sa2">
          <view @click="gotoMyPurse" class="item wi">
            <uv-image
              src="/static/aa4.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">我的钱包</view>
          </view>

          <view @click="gotoAdress" class="item wi">
            <uv-image
              src="/static/aa3.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">收货地址</view>
          </view>

          <view style="position: relative" class="item wi">
            <uv-image
              src="/static/aa2.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">官方客服</view>
            <button
              style="position: absolute; z-index: 999; opacity: 0"
              open-type="contact"
            >
              123
            </button>
          </view>

          <view @click="gotoPD" class="item wi">
            <uv-image
              src="/static/aa1.png"
              mode='widthFix'
              width="60rpx"
            ></uv-image>
            <view class="text">排行榜</view>
          </view>

          <view v-if="false" class="item wi">
            <uv-image
              src="/static/s5.png"
              width="55rpx"
              height="55rpx"
            ></uv-image>
            <view class="text">今日必抢</view>
          </view>
        </view>
      </view>
    </view>

    <uv-divider textSize="22rpx" text="为您推荐 猜您喜欢"></uv-divider>

    <view class="list_goods">
      <view
        v-for="(item, index) in recommendListData"
        :key="index"
        @click="gotoDetail(item)"
        class="item"
      >
        <uv-image
        mode='widthFix'
          :lazy-load="true"
          :src="item.imgUrl"
          width="100%"
          
        ></uv-image>
        <view class="item_title">
          <p class="span_p" style="text-align: left; font-size: 24rpx">
            <view v-if="item.tips" class="nianhuo">
              {{ item.tips }}
            </view>
            <text>
              {{ item.goodsTitle }}
            </text>
          </p>
        </view>

        <view class="prive_title">
          <span class="price_red">￥{{ item.goodsPrice }} </span>

          <span class="price_scale">已售{{ index + +item.prodId }}件 </span>
        </view>

        <view style="display: none" class="margin_top_bottom">
          <view class="box1">多人拼团</view>
          <view class="box2">
            <view class="quan">券</view>
            <view class="quan2">满100元减30</view>
          </view>
        </view>

        <view class="shopmall">
          {{ item.shopName }}
          <uv-icon name="arrow-right" color="#8D8D8D" size="12"></uv-icon
        ></view>
      </view>
    </view>
  </div>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import {
  prodTagList,
  getTodayGrab,
  recommendList,
  topNoticeList,
  orderCount,
} from "../https/api/index";
import { userInfo as userInfoS } from "../https/api/reigist";

let gotoNewPage = () => {
  uni.navigateTo({
    url: "/pages/reigist",
  });
};

let gotoPD = () => {
  uni.switchTab({
    url: "/pages/linedUp",
  });
};

let gotoDetail = (item) => {
  uni.setStorageSync("goodsDetailData", JSON.stringify(item));
  uni.navigateTo({
    url: "/pages/goodsDetail",
  });
};

let recommendListData = ref([]);
let getrecommendList = async (data) => {
  let res = await getTodayGrab(data);
  if (res) {
    recommendListData.value = res.data.records.map((v) => {
      return {
        ...v,
        imgUrl: v.pic,
        goodsPrice: v.price,
        goodsTitle: v.prodName,
      };
    });
  }
};

let gotoAdress = () => {
  if (uni.getStorageSync("userInfo")) {
    uni.navigateTo({
      url: "/pages/newAdress",
    });
  } else {
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  }
};

let gotoMyPurse = () => {
  if (uni.getStorageSync("userInfo")) {
    uni.navigateTo({
      url: "/pages/purse",
    });
  } else {
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  }
};

let gotoMyList = (text) => {
  if (uni.getStorageSync("userInfo")) {
    uni.navigateTo({
      url: "/pages/myBuyList?data=" + text,
    });
  } else {
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  }
};

let reCom = ref({});
let getprodTagList = async () => {
  let res = await prodTagList();

  let obj2 = res.data.find((v) => v.title.includes("推荐"));

  if (Object.keys(obj2).length > 0) {
    reCom.value = obj2;
  } else {
    reCom.value = res.data[0];
  }

  getrecommendList({ tagId: reCom.value.id, size: 6 });
};

let orderData = ref({});
let getorderCountData = async () => {
  let res = await orderCount();
  if (!res.fail) {
    orderData.value = res.data;
  } else {
    uni.clearStorageSync();
    uni.showToast({
      title: "登录失效，请重新登录",
      icon: "error",
    });
  }
};

let getuserInfo = async () => {
  let res = await userInfoS();

  if (!res.fail) {
    uni.setStorageSync("rebateAmount", res.data.rebateAmount);
    uni.setStorageSync(
                      "userInfo",
                      JSON.stringify(res.data)
                    );
                    userInfo.value = res.data
    userInfo.value.nickName = res.data.nickName;
    userInfo.value.avatarUrl = res.data.pic;
  }
};
onShow(() => {
  
  let loginBool = JSON.parse(uni.getStorageSync('loginOk'))
  if(loginBool){
    getuserInfo();
    getorderCountData();
  }else{
    uni.removeStorageSync('userInfo')
  }




  getprodTagList({ tagId: reCom.value.id, size: 6 });
});

//登录临时凭证
let code = ref(null);
onLoad(() => {
  uni.login({
    success: (res) => {
      console.log(res, "333");
      code.value = res.code;
    },
  });
});

let userInfo = ref({});
let clickLogin = () => {
 
        uni.login({
          success: (res) => {
         console.log(res)
            uni.setStorageSync('loginCode',res.code)
          },
        });

        uni.getUserProfile({
          desc: "登录后可同步数据",
          lang: "zh_CN",
          success: (resInfo) => {
            resInfo.userInfo.avatarUrl =
                      "https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png";
                      uni.setStorageSync(
                      "userInfo",
                      JSON.stringify(resInfo.userInfo)
                    );

                  
                 
          },
          fail: (dara) => {
            console.log(dara);
          },
        });
      


  uni.navigateTo({
    url: "/pages/login",
  });
 
};
</script>

<style lang="scss" scoped>
.list_goods {
  padding: 20rpx;
  .prive_title {
    margin-top: 8rpx;
    padding: 0 15rpx;
  }
  .shopmall {
    margin-top: 10rpx;
    display: flex;
    color: #8d8d8d;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
  }
  .margin_top_bottom {
    padding: 0 15rpx;
    margin-bottom: 8rpx;
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .box1 {
      margin-right: 20rpx;
      border: 1px solid #ff1c23;
      width: 85rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #df0024;
      font-size: 18rpx;
    }
    .box2 {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .quan {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-right: 1px dashed #ff1c23;
      color: #df0024;
      font-size: 18rpx;
    }
    .quan2 {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-left: none;
      color: #df0024;
      font-size: 18rpx;
    }
  }
  .price_red {
    color: #ff1c23;
    font-size: 31rpx;
  }
  .price_scale {
    margin-left: 20rpx;
    color: #8d8d8d;
    font-size: 22rpx;
  }
  margin-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20rpx;
    width: 49%;
    border-radius: 15rpx;
    background: white;
    .item_title {
      font-size: 25rpx;
      padding: 0 15rpx;
      margin-top: 15rpx;

      align-items: center;
    }
    .span_p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .nianhuo {
      display: inline-block;
      border-radius: 10rpx;
      vertical-align: top;
      font-size: 20rpx;
      background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
      width: 54rpx;
      height: 28rpx;
      text-align: center;
      color: white;
      font-weight: bolder;
      line-height: 28rpx;
      display: inline-block;
    }
  }
}
.nopadding {
  padding: 0 !important;
}
.sa2 {
 
  flex-wrap: wrap;
}
.wi {
  display: flex;
  align-items: center;
  justify-content: center;
 
  
}
.box_list {
 
  .item {
    width: 15%;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #333333ff;
    font-size: 22rpx;
    .text {
      margin-top: 10rpx;
    }
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_text_right_lef {
  margin-right: 5rpx;
}
.list_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_list {
  margin-bottom: 30rpx;
  border-radius: 30rpx;
  background: white;
  padding: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  .list_right {
    color: #4c4c4cff;
    display: flex;
    align-items: center;
    font-size: 22rpx;
  }
  .list_left {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    .my_text {
      margin-left: 10rpx;
    }
  }
}
.my_message {
  margin: 40rpx 0;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    display: flex;
    color: #4c4c4c;
    font-size: 22rpx;
    flex-direction: column;
    align-items: center;
    .tezxt {
      margin-top: 10rpx;
    }
  }
}
.my {
  background: #f8f8f8;
}
.my_content {
  padding: 20rpx;
  background-image: linear-gradient(0deg, #f8f8f8, #ffecec);
  .click {
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
  .my_yiyle {
    align-items: center;
    display: flex;
  }
}
</style>